<template>
	<view class="OrderList">
		<view class="headtop">
			<!-- <view :class="act == 0 ? 'act' : 'title'" @click="tabs(0)"> 淘宝 </view> -->
			<view :class="act == 1 ? 'act' : 'title'" @click="tabs(1)"> 京东 </view>
			<view :class="act == 2 ? 'act' : 'title'" @click="tabs(2)"> 唯品会 </view>
			<view :class="act == 3 ? 'act' : 'title'" @click="tabs(3)"> 牛粉商城 </view>
		</view>
		<view v-if="act==0" class="content_list">
			<view class="item" v-for="(item, index) in goodslists" @click="jump(item)">
				<view class="top">
					<image :src="item.goodsImg" class="goods" mode=""></image>
					<view class="info">
						<view class="name">
							{{ item.goodsName }}
						</view>
						<view class="miaoshu">
							<!-- {{ item.goodsSpecificationsValue }} -->
						</view>
					</view>
					<view class="status">
						<view class="yuan1"> ￥{{ item.goodsPrice }} </view>
						<view class="yuan2"> x{{ item.goodsNum }} </view>
					</view>
				</view>
				<view class="price">
					<view class="qian">
						{{ item.status | tstatus }}
					</view>
					<view class="shi"> 实付￥{{ item.alipayTotalPrice }} </view>
				</view>
			</view>
		</view>

		<view v-if="act==1" class="content_list">
			<view class="item" v-for="(item, index) in goodslists" @click="jump(item)">
				<view class="top">
					<image :src="item.imageUrl" class="goods" mode=""></image>
					<view class="info">
						<view class="name">
							{{ item.skuName }}
						</view>
						<view class="miaoshu">
							<!-- {{ item.goodsSpecificationsValue }} -->
						</view>
					</view>
					<view class="status">
						<view class="yuan1"> ￥{{ item.price }} </view>
						<view class="yuan2"> x{{ item.skuNum }} </view>
					</view>
				</view>
				<view class="price">
					<view class="qian">
						{{ item.orderStatus | orderStatus }}
					</view>
					<view class="shi"> 实付￥{{ item.price * item.skuNum}} </view>
				</view>
			</view>
		</view>

		<view v-if="act==2" class="content_list">
			<view class="item" v-for="(item, index) in goodslists" @click="jump(item)">
				<view class="top">
					<image :src="item.weiPinHuiGoods[0].thumb" class="goods" mode=""></image>
					<view class="info">
						<view class="name">
							{{ item.weiPinHuiGoods[0].name }}
						</view>
						<view class="miaoshu">
							<!-- {{ item.goodsSpecificationsValue }} -->
						</view>
					</view>
					<view class="status">
						<view class="yuan1"> ￥{{ item.weiPinHuiGoods[0].commissionTotalCost }} </view>
						<view class="yuan2"> x{{ item.weiPinHuiGoods[0].count}} </view>
					</view>
				</view>
				<view class="price">
					<view class="qian">
						{{ item.orderSubStatusName }}
					</view>
					<view class="shi"> 实付￥{{ item.totalCost }} </view>
				</view>
			</view>
		</view>
		
		<view v-if="act==3" class="content_list">
			<view class="item" v-for="(item, index) in goodslists" @click="jump(item)">
				<view class="top">
					<image :src="item.goodsMainImages" class="goods" mode=""></image>
					<view class="info">
						<view class="name">
							{{ item.goodsName }}
						</view>
						<view class="miaoshu">
							<!-- {{ item.goodsSpecificationsValue }} -->
						</view>
					</view>
					<view class="status">
						<view class="yuan1"> ￥{{ item.price }} </view>
						<view class="yuan2"> x{{ item.num}} </view>
					</view>
				</view>
				<view class="price">
					<view class="price_buttonBox">
						<view @click.stop="opencler(item)" class="price_buttonBox_cancelOrder">
							取消订单
						</view>
						<view @click.stop="Payment(item)" class="price_buttonBox_Payment">
							去付款
						</view>
						<!-- {{ item.orderSubStatusName }}2 -->
					</view>
					<view class="shi"> 实付￥{{ item.totalPrice }} </view>
				</view>
			</view>
		</view>
		<u-modal :show="show" @confirm="modalconfirm" @cancel="show = false" ref="uModal" @close="modalclose" showCancelButton
			:closeOnClickOverlay="true">
			是否删除名为“{{deleteName}}”的商品订单吗？
		</u-modal>
	</view>
</template>

<script>
	import {
		orderlist,
		taobaoorderlist,
		getWeiPinHuiOrder,
		jingdongOrder,
		bootordercancel
	} from "@/api/orderlist";
	export default {
		data() {
			return {
				act: 1,
				lists: {
					type: 1,
					pageSize: 10,
					pageNum: 1,
				},
				goodslists: [],
				show:false,
				deleteid:'',
				deleteName:''
			};
		},
		filters: {
			orderStatus(text) {
				let str = ""
				if (text == 2) {
					str = "无效"
				}
				if (text == 3) {
					str = "已取消"
				}
				if (text == 15) {
					str = "待付款"
				}
				if (text == 16) {
					str = "已付款"
				}
				if (text == 17) {
					str = "已完成"
				}
				return str
			},
			tstatus(text) {
				let str = ""
				if (text == 3) {
					str = "已结算"
				}
				if (text == 12) {
					str = "待收货"
				}
				if (text == 13) {
					str = "已失效"
				}
				if (text == 14) {
					str = "已收货"
				}
				return str
			}
		},
		onReachBottom() {
			this.lists.pageNum++;
			if (this.act == 0) {
				this.taobaoorderlist();
			} else if (this.act == 1) {
				this.jingdongOrder();
			} else if (this.act == 2) {
				this.getWeiPinHuiOrder();
			}else if (this.act == 3) {
				this.getmineOrder();
			}
		},
		onShow() {
			console.log(this.act)
			this.tabs(this.act);
		},
		created() {
			// this.goodslist();
			// this.taobaoorderlist();
			this.jingdongOrder();
		},
		methods: {
			Payment(data){
				uni.navigateTo({
				    url: '/pages/index/payment/payment?id='+data.id
				});
			},
			modalclose(){
				this.show = false
			},
			modalconfirm(){
				bootordercancel(this.deleteid).then(res =>{
					console.log(res);
					if (res.success == 1){
						this.show = false
						this.tabs(3)
					}else{
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			opencler(data){
				this.show = true;
				this.deleteid = data.id
				this.deleteName = data.goodsName
			},
			jump(item) {
				console.log(item)
				uni.navigateTo({
					url: `./orderdetail?type=${this.act}&id=${item.id}`,
				});
			},
			jingdongOrder() {
				let data = {
					page: this.lists.pageNum,
					pageSize: this.lists.pageSize,
					orderStatus: 15
				};
				jingdongOrder(data)
					.then((res) => {
						if (res.success == 1 && res.data.records.length != 0) {
							console.log(res.data);
							for (let sss in res.data.records) {
								this.goodslists.push(res.data.records[sss]);
							}
						} else {
							this.lists.pageNum--;
							uni.showToast({
								title: "无更多订单",
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((res) => {
						console.log(res);
						this.lists.pageNum--;
					});
			},
			getWeiPinHuiOrder() {
				let data = {
					page: this.lists.pageNum,
					pageSize: this.lists.pageSize,
					orderSubStatusName: '已下单'
				};
				getWeiPinHuiOrder(data)
					.then((res) => {
						if (res.success == 1 && res.data.records.length != 0) {
							console.log(res.data);
							for (let sss in res.data.records) {
								this.goodslists.push(res.data.records[sss]);
							}
						} else {
							this.lists.pageNum--;
							uni.showToast({
								title: "无更多订单",
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((res) => {
						console.log(res);
						this.lists.pageNum--;
					});
			},
			taobaoorderlist() {
				taobaoorderlist(this.lists)
					.then((res) => {
						if (res.success == 1 && res.data.records.length != 0) {
							console.log(res.data);
							for (let sss in res.data.records) {
								this.goodslists.push(res.data.records[sss]);
							}
						} else {
							this.lists.pageNum--;
							uni.showToast({
								title: "无更多订单",
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((res) => {
						console.log(res);
						this.lists.pageNum--;
					});
			},
			goodslist() {
				orderlist(this.lists)
					.then((res) => {
						if (res.success == 1 && res.data.records.length != 0) {
							console.log(res.data);
							for (let sss in res.data.records) {
								this.goodslists.push(res.data.records[sss]);
							}
						} else {
							this.lists.pageNum--;
							uni.showToast({
								title: "无更多订单",
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((res) => {
						console.log(res);
						this.lists.pageNum--;
					});
			},
			getmineOrder() {
				let data = {
					pageNum: this.lists.pageNum,
					pageSize: this.lists.pageSize,
					orderStatus: 0
				};
				orderlist(data)
					.then((res) => {
						if (res.success == 1 && res.data.records.length != 0) {
							console.log(res.data);
							for (let sss in res.data.records) {
								this.goodslists.push(res.data.records[sss]);
							}
						} else {
							this.lists.pageNum--;
							uni.showToast({
								title: "无更多订单",
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((res) => {
						console.log(res);
						this.lists.pageNum--;
					});
			},
			tabs(i) {
				this.act = i;
				this.goodslists = [];
				if (i == 0) {
					// this.lists.pageSize = 5;
					this.lists.pageNum = 1;
					this.taobaoorderlist();
				} else if (i == 1) {
					// this.lists.pageSize = 5;
					this.lists.pageNum = 1;
					this.jingdongOrder();
				} else if (i == 2) {
					// this.lists.pageSize = 5;
					this.lists.pageNum = 1;
					this.getWeiPinHuiOrder();
				} else if (i == 3) {
					// this.lists.pageSize = 5;
					this.lists.pageNum = 1;
					this.getmineOrder();
				}
			},
		},
		onLoad(option) {
			if (option.act) {
				// this.act = option.act
				this.tabs(option.act);
				console.log(option.act);
				this.act = option.act;
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #e7e9ec;
		padding: 0;
		margin: 0;
		// background-color: #18BC37;
	}

	.OrderList {
		// padding: 30rpx;
		padding: 0;
		margin: 0;
	}

	.headtop {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		// padding-bottom: 40upx;
		height: 100upx;
		z-index: 100;
		background-color: #ffffff;

		.title {
			color: rgba(0, 0, 0, 0.5);
			font-size: 32rpx;
		}

		.act {
			color: #ec5050;
			font-size: 32rpx;
			border-bottom: 4rpx solid #ec5050;
			padding-bottom: 6rpx;
			position: relative;
			top: 6rpx;
		}
	}

	.content_list {
		padding: 30rpx;
		// margin-top: 20rpx;
		padding-top: 140rpx;

		.item {
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #ffffff;
			border-radius: 15rpx;

			.top {
				// position: fixed;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 30rpx;

				.goods {
					width: 230rpx;
					height: 230rpx;
					border-radius: 16rpx;
				}

				.info {
					height: 230rpx;
					width: 250rpx;

					.name {
						color: rgba(0, 0, 0, 0.9);
						font-size: 28rpx;
						margin-bottom: 15rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}

					.miaoshu {
						color: rgba(0, 0, 0, 0.3);
						font-size: 22rpx;
					}
				}

				.status {
					// color: #FC6758;
					// font-size: 22rpx;
					text-align: right;

					.yuan1 {
						color: #333333;
						font-size: 26rpx;
						margin-bottom: 6rpx;
					}

					.yuan2 {
						color: #888888;
						font-size: 28rpx;
					}
				}
			}

			.price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price_buttonBox{
					display: flex;
					align-items: center;
					.price_buttonBox_cancelOrder{
						font-size: 28upx;
						border-radius: 10upx;
						border:2upx solid #ddd;
						padding: 7upx 15upx;
						color: #ec5050;
					}
					.price_buttonBox_Payment{
						font-size: 28upx;
						border-radius: 10upx;
						border:2upx solid #ddd;
						padding: 7upx 15upx;
						margin-left: 20upx;
					}
				}
				// margin-top: 20rpx;
				.qian {
					width: 230rpx;
					text-align: center;
					color: #fc6758;
					font-size: 28rpx;
				}

				.yuan {
					color: rgba(168, 168, 168, 0.9);
					font-size: 28rpx;
					margin-right: 40rpx;
				}

				.shi {
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
				}
			}
		}
	}
</style>
